<script setup lang="ts">
// 设置默认值
const props = defineProps<{
  name: string
  money?: number
}>()

// 代码中要使用 props 的数据需要点出来
console.log(props)

// 定义了一个 叫做changeMoney 的事件
// 参数 money ，类型是 number
// 返回值 为空
defineEmits<{
  (e: 'changeMoney', money: number): void
}>()
</script>

<template>
  <div>
    <h2>我是子组件</h2>
    <!-- props 定义的数据，子组件的结构中可以直接使用，不需要用 props 点出来 -->
    <p>name:{{ name }}</p>
    <p>money:{{ money }}</p>
    <button @click="$emit('changeMoney', 800)">找老爹要零花钱</button>
  </div>
</template>

<style scoped>
div {
  width: 200px;
  height: 200px;
  background-color: skyblue;
}
</style>
